import { ElButton, ElCheckbox } from "element-plus";
import { defineComponent } from "vue";
import { showSlot } from "~/src/utils/hooks";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
interface ItemInfo {
    id: string;
    title: string;
    money: string;
}
export default defineComponent({
    props: {
        id:{type:String, default: "",},
        title:{type:String, default: "",},
        money:{type:String, default: "",},
    },
    setup(props, { slots }) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        return () => (
            <div class={slots["btn"] ? Style.outer2 : Style.outer}>
                {props.id ?
                    <div class={[Style.child, Style.content,slots.btn? Style.outer_height : ""]}>
                        <ElCheckbox   size="large" style={{ marginLeft: "32px", flex: "1" }}><span class={[Style.ztStyle,slots.btn? Style.zt_color : ""]}>{props.title}</span></ElCheckbox>
                        <div style={{ color: "#F20C27", marginRight: "32px" }} class={Style.ztStyle}>￥ {props.money}</div>
                    </div> :
                    <div class={[Style.child, Style.content,slots.btn? Style.outer_height : ""]}>
                        <ElCheckbox   size="large" style={{ marginLeft: "32px", flex: "1" }}><span class={[Style.ztStyle,slots.btn? Style.zt_color : ""]}>全部支付 (共{}条单据)</span></ElCheckbox>
                        <div style={{ color: "#F20C27", marginRight: "32px" }} class={Style.ztStyle}>合计：￥{}</div>
                    </div>
                }
                {slots.btn ? (
                    <div class={[Style.child, Style.content]}>
                        {showSlot(slots, "btn")}
                    </div>
                ) : (
                    <>
                        {KEEP_VIDEO_TOP ? "" : (
                            <>
                                <div class={Style.divider}></div>
                                <div class={[Style.child, Style.content, Style.ztStyle2]}>
                                    <div style={{ marginLeft: "32px", flex: "1" }}>
                                        就诊科室:<span>皮肤科门诊</span>
                                    </div>
                                    <div style={{ marginRight: "32px" }} >
                                        就诊时间:<span>2025-1-9 10:25</span>
                                    </div>
                                </div>
                            </>
                        )}
                    </>
                )}
            </div>
        )
    }
})
